<template>
  <AppPage>
    <div relative>
      <!-- 头部 -->
      <div class="bg-[#FFFFFF]">
        <img src="@/assets/images/top_bg.png" h-full w-full />
        <div absolute left-30px top-70px text-36px font-bold>AI 操盘</div>
        <div absolute left-25px top-130px rounded-20px px-18px py-2px text-10px class="bg-[#FFFFFF] color-[#232435]">
          {{ userProfit.due_time }}
        </div>
      </div>

      <div absolute right-0 top-20px>
        <router-link to="/tradingRules"><img src="@/assets/images/ico_trade_rule.png" w-77px /></router-link>
      </div>

      <!-- 总资产 -->
      <div px-20px class="bg-[#FFFFFF]" pb-20px text-18px>
        <div flex justify-between>
          <div text-17px>总资产</div>
          <div flex>
            <div text-17px><span text-11px>￥</span>{{ userProfit.TotalAsset }}</div>
            <!-- <div ml-10px>
               <icon-fluent-ChevronUp12Filled mt-4px></icon-fluent-ChevronUp12Filled>
               <icon-fluent-ChevronDown12Filled mt-4px></icon-fluent-ChevronDown12Filled> 
            </div> -->
          </div>
        </div>
        <div name="fade" class="profit_con">
          <div>
            <n-grid x-gap="12" :cols="3" text-center>
              <n-gi>
                <div>今日盈亏</div>
                <div :style="{ color: numColor(userProfit.TodayProfit) }">{{ userProfit.TodayProfit }}</div>
                <div :style="{ color: numColor(userProfit.TodayProfitPro) }">({{ userProfit.TodayProfitPro }})</div>
              </n-gi>
              <n-gi
                ><div>持仓盈亏</div>
                <div :style="{ color: numColor(userProfit.PositionProfit) }">{{ userProfit.PositionProfit }}</div>
                <div :style="{ color: numColor(userProfit.PositionProfitPro) }">
                  ({{ userProfit.PositionProfitPro }})
                </div>
              </n-gi>
              <n-gi
                ><div>累计盈亏</div>
                <div :style="{ color: numColor(userProfit.AccumulateProfit) }">{{ userProfit.AccumulateProfit }}</div>
                <div :style="{ color: numColor(userProfit.AccumulateProfitPro) }">
                  ({{ userProfit.AccumulateProfitPro }})
                </div>
              </n-gi>
              <n-gi>
                <div>总市值</div>
                <div>{{ userProfit.SecurityAsset }}</div>
              </n-gi>
              <n-gi>
                <div>现金</div>
                <div>{{ userProfit.BuyingPower }}</div>
              </n-gi>
              <n-gi>
                <div>本金</div>
                <div>{{ userProfit.InitialAsset }}</div>
              </n-gi>
            </n-grid>
          </div>
        </div>
      </div>

      <div relative class="bg-[#FFFFFF]" style="min-height: 40px">
        <div absolute top-3px z-10 px-20px pb-15px @click="changeShow()">
          <div flex justify-between>
            <div text-17px>收益走势</div>
          </div>
        </div>
        <n-collapse-transition :show="showEcharts">
          <div class="echarts-box" pl-15px pt-5px>
            <div ref="main" style="width: 100%; height: 220px" class="bg-[#FFFFFF]"></div>
          </div>
        </n-collapse-transition>

        <div absolute right-10px top-3px z-10 @click="changeShow()">
          <div flex justify-between>
            <div>
              <icon-fluent-ChevronUp12Filled v-show="showEcharts" mt-4px></icon-fluent-ChevronUp12Filled>
              <icon-fluent-ChevronDown12Filled v-show="!showEcharts" mt-4px></icon-fluent-ChevronDown12Filled>
            </div>
          </div>
        </div>
      </div>

      <n-tabs :bar-width="12" type="line" default-value="position" animated @before-leave="handleBeforeLeave">
        <n-tab-pane name="position" tab="持仓情况" px-20px pt-0>
          <div v-for="item in userPosition" class="position" m-15px>
            <div class="p_item" relative>
              <div flex justify-between>
                <div>
                  <div v-if="item.New == '1'" absolute left-0px top-0px w-35px>
                    <img src="@/assets/images/ico_new.png" w-full />
                  </div>
                  <div class="stock">
                    <div class="stock_name">{{ item.Symbol }}</div>
                    <div class="stock_tag" ml-8px>{{ item.hymc }}</div>
                  </div>
                  <div class="stock_num">{{ item.StockCode }}</div>
                </div>
                <div>
                  <div class="position_info" mt-6px>
                    <div mt-1px inline-block vertical-middle>
                      <img src="@/assets/images/ico_position.png" w-6px />
                    </div>
                    <div ml-5px inline-block vertical-middle class="text-[#888]">{{ item.MaxPosition }}</div>
                  </div>
                  <div class="position_time" text-12px>{{ item.BuyDate }}</div>
                </div>
              </div>

              <div mt20px>
                <n-grid x-gap="12" :cols="4" text-center>
                  <n-gi text-left>
                    <div>成本/现价</div>
                    <div>{{ item.Cost }}</div>
                    <div>{{ item.RealPrice }}</div>
                  </n-gi>
                  <n-gi>
                    <div>持仓/可用</div>
                    <div>{{ item.TotalQty }}</div>
                    <div>{{ item.SellableQty }}</div>
                  </n-gi>
                  <n-gi text-right>
                    <div>今日盈亏</div>
                    <div :style="{ color: numColor(item.TodayProfit) }">{{ item.TodayProfit }}</div>
                    <div :style="{ color: numColor(item.TodayProfitPro) }">{{ item.TodayProfitPro }}</div>
                  </n-gi>
                  <n-gi text-right>
                    <div>持仓盈亏</div>
                    <div :style="{ color: numColor(item.PositionProfit) }">{{ item.PositionProfit }}</div>
                    <div :style="{ color: numColor(item.PositionProfitPro) }">{{ item.PositionProfitPro }}</div>
                  </n-gi>
                </n-grid>
              </div>
            </div>
          </div></n-tab-pane
        >
        <n-tab-pane name="transaction" tab="交易记录" px-20px pt-0>
          <div v-for="item in userTrade" class="transaction" relative m-10px>
            <div class="p_item">
              <div flex justify-between>
                <div flex>
                  <div class="item_tag" :style="{ backgroundColor: item.BusinessSide != '0' ? '#6B95FF' : '#FF9B70' }">
                    {{ item.BusinessSide != '0' ? '卖' : '买' }}
                  </div>
                  <div class="stock_name" ml-6px>{{ item.Symbol }}</div>
                  <div class="stock_code" ml-8px>{{ item.StockCode }}</div>
                </div>

                <div class="time">{{ item.Createtime }}</div>
              </div>

              <div mt18px>
                <n-grid x-gap="12" :cols="3" text-center class="text-[#aaa]">
                  <n-gi>
                    <div>成交价格</div>
                    <div class="text-[#333]">{{ item.Price }}</div>
                  </n-gi>
                  <n-gi>
                    <div>成交数量</div>
                    <div class="text-[#333]">{{ item.Quantity }}</div>
                  </n-gi>
                  <n-gi>
                    <div>成交金额</div>
                    <div class="text-[#333]">{{ item.TradeAmount }}</div>
                  </n-gi>
                </n-grid>
              </div>
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane name="clearance" tab="清仓记录" px-20px pt-0>
          <div v-for="(item, index) in userClearance" class="clearance" relative m-10px>
            <div class="p_item">
              <div>
                <div flex items-center justify-between @click="showToggle(index)">
                  <div
                    style="flex-basis: 45%"
                    :class="[parseInt(item.Total) == 0 ? 'normal' : item.Total.indexOf('+') >= 0 ? 'up' : 'down']"
                  >
                    <div class="stock_name">{{ item.Symbol }}</div>
                    <div class="stock_code">{{ item.StockCode }}</div>
                  </div>
                  <div
                    style="flex-basis: calc(100% - 45% - 30px)"
                    :class="[parseInt(item.Total) == 0 ? 'normal' : item.Total.indexOf('+') >= 0 ? 'up' : 'down']"
                    text-right
                  >
                    <div text-15px>
                      {{ item.Total }}
                    </div>
                    <div text-13px>
                      {{ item.TotalPro }}
                    </div>
                  </div>
                  <div style="flex-basis: 30px; color: #c2c2c2" text-right>
                    <div v-if="item.toggle == 1">
                      <icon-fa-ChevronUp mt-4px></icon-fa-ChevronUp>
                    </div>
                    <div v-else>
                      <icon-fa-ChevronDown mt-4px></icon-fa-ChevronDown>
                    </div>
                  </div>
                </div>
              </div>
              <n-collapse-transition :show="item.toggle == 1">
                <div class="bg-[#f2f2f2]" mb-12px mt-10px h-1 w-full></div>
                <div>
                  <n-grid x-gap="12" :cols="22" text-center class="text-[#aaa]" text-12px>
                    <n-gi :span="6">
                      <div text-left>成交时间</div>
                    </n-gi>
                    <n-gi :span="5">
                      <div>成交价</div>
                    </n-gi>
                    <n-gi :span="5">
                      <div>成交量</div>
                    </n-gi>
                    <n-gi :span="6">
                      <div text-right>成交额</div>
                    </n-gi>
                  </n-grid>
                  <n-grid :x-gap="12" :cols="22" class="text-[#333]" mt5px text-center text-12px>
                    <n-gi :span="6">
                      <div text-left text-12px>
                        <div>{{ item.SellDate1 }}</div>
                        <div mt--1px>{{ item.SellDate2 }}</div>
                      </div>
                    </n-gi>
                    <n-gi :span="5">
                      <div mt6px text-15px>{{ item.SellPrice }}</div>
                    </n-gi>
                    <n-gi :span="5">
                      <div mt6px text-15px>{{ item.SellQty }}</div>
                    </n-gi>
                    <n-gi :span="6">
                      <div text-right>
                        <div text-12px>卖出</div>
                        <div mt--1px>{{ item.SellTotal }}</div>
                      </div>
                    </n-gi>

                    <n-gi :span="6" mt10px>
                      <div text-left text-12px>
                        <div>{{ item.BuyDate1 }}</div>
                        <div>{{ item.BuyDate2 }}</div>
                      </div>
                    </n-gi>
                    <n-gi :span="5" mt10px>
                      <div mt6px text-15px>{{ item.BuyPrice }}</div>
                    </n-gi>
                    <n-gi :span="5" mt10px>
                      <div mt6px text-15px>{{ item.BuyQty }}</div>
                    </n-gi>
                    <n-gi :span="6" mt10px>
                      <div text-right>
                        <div text-12px>买入</div>
                        <div mt--1px>{{ item.BuyTotal }}</div>
                      </div>
                    </n-gi>
                  </n-grid>
                </div>
              </n-collapse-transition>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </AppPage>
</template>

<script setup>
//  按需引入 echarts
import * as echarts from 'echarts'
import { useUserStore } from '@/store'
import { Base64 } from 'js-base64'
import api from './api'

const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const userStore = useUserStore()
const showTotalAssets = ref(false)
const uid = ref()
const request_profit = {
  member_id: '14956412',
  page: '1',
}
const request_position = {
  member_id: '14956412',
  page: '1',
}
const request_trade = {
  member_id: '14956412',
  page: '1',
}
let userProfit = ref({
  dut_time: '',
  TotalAsset: '0',
  TodayProfit: '0.00',
  TodayProfitPro: '0.00%',
  PositionProfit: '0.00',
  PositionProfitPro: '0.00%',
  AccumulateProfit: '0.00',
  AccumulateProfitPro: '0.00%',
  SecurityAsset: '',
  BuyingPower: '',
  InitialAsset: '',
  SimulatedPosition: {},
  HuShen300: {},
}) //爱操盘资产信息和收益走势
let userPosition = ref({})
let userTrade = ref({}) //交易记录列表
let userClearance = ref({}) //清仓记录列表
let showEcharts = ref(false)
onMounted(() => {
  uid.value = new URL(location.href).searchParams.get('uid')
    ? Base64.decode(new URL(location.href).searchParams.get('uid'))
    : '14956412'
  request_profit.member_id = uid.value
  api.getAiUserasset(request_profit).then((res) => {
    userProfit.value = res
  })
  //爱操盘持仓列表
  api.getAiUserstock(request_profit).then((res) => {
    userPosition.value = res
  })
  // initChart()
})

onUnmounted(() => {})

function changeShow() {
  //   //如果要隐藏
  if (showEcharts.value == true) {
    echarts.init(main.value).dispose()
  } else {
    //显示
    setTimeout(() => {
      initChart()
    }, 400)
  }
  setTimeout(() => {
    showEcharts.value = !showEcharts.value
  }, 200)
}

function numColor(num) {
  if (typeof num == 'string') {
    num = num.replace('%', '')
  }
  //let num = num.replace('%', '')
  if (parseFloat(num) > 0) {
    return '#FF5151'
  } else if (parseFloat(num) < 0) {
    return '#00D07E'
  } else {
    return '#333'
  }
}
function initChart() {
  api.getAiUserasset(request_profit).then((res) => {
    userProfit.value = res

    let dateTime = []
    let SimulatedPosition = []
    let HuShen300 = []
    userProfit.value.Time.forEach((element, index) => {
      dateTime.push(element.DisplayTime)
      SimulatedPosition.push(userProfit.value.SimulatedPosition[index].Line)
      HuShen300.push(userProfit.value.HuShen300[index].Line)
    })
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value)
    // 指定图表的配置项和数据
    var option = {
      legend: {
        data: ['模拟持仓', '沪深300'],
        right: '10%',
        icon: 'circle',
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: [
        // 折线图
        {
          type: 'category',
          data: dateTime,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
        },
      ],
      // 纵坐标配置
      yAxis: [
        {
          scale: true,
          splitArea: {
            show: true,
          },
        },
      ],

      series: [
        {
          name: '模拟持仓',
          data: SimulatedPosition,
          type: 'line',
          showSymbol: false,
        },
        {
          name: '沪深300',
          data: HuShen300,
          type: 'line',
          showSymbol: false,
        },
      ],
      color: ['#3366CC', '#FF0000'], // 三个折线的颜色
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  })
}
function handleBeforeLeave(tabName) {
  switch (tabName) {
    case 'transaction':
      //交易记录列表
      api.getAIUserOrder(request_profit).then((res) => {
        userTrade.value = res
      })
      break
      break
    case 'position':
      //爱操盘持仓列表
      api.getAiUserstock(request_profit).then((res) => {
        userPosition.value = res
      })
      break
    case 'clearance':
      //爱操盘持仓列表
      api.getAiUserClear(request_profit).then((res) => {
        res.forEach((ele, ii) => {
          res[ii].toggle = 0
        })
        userClearance.value = res
      })
      break
    default:
      break
  }
  return true
}
function showToggle(index) {
  // userClearance.value.forEach((ele, ii) => {
  //   if (ii != index) {
  //     userClearance.value[ii].toggle = 0
  //   }
  // })
  userClearance.value[index].toggle = userClearance.value[index].toggle == 0 ? 1 : 0
}
</script>
<style lang="scss" scoped>
.profit_con .n-grid > div > div:first-child {
  font-size: 13px;
  color: #aaa;
  margin-top: 15px;
}
.profit_con .n-grid > div > div:nth-child(2) {
  font-size: 16px;
  margin-top: 2px;
}
.profit_con .n-grid > div > div:nth-child(3) {
  margin-top: -4px;
  font-size: 13px;
}
.position .p_item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.06);
  padding: 20px;
  .stock_name {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
  }
  .stock_tag {
    display: inline-block;
    background: #f8f8f8;
    padding: 2px 5px;
    font-size: 10px;
    color: #aaa;
    border-radius: 5px;
    vertical-align: middle;
  }
  .stock_num {
    color: #888;
    font-size: 14px;
    margin-top: -4px;
  }
  .position_info {
    font-size: 12px;
    > div:first-child {
      color: #888;
    }
    text-align: right;
  }
  .position_time {
    color: #888;
  }
  .n-grid > div > div:first-child {
    font-size: 11px;
    color: #aaa;
  }
  .n-grid > div > div:nth-child(2) {
    font-size: 16px;
    margin-top: 3px;
  }
  .n-grid > div > div:nth-child(3) {
    font-size: 16px;
  }
}

.transaction .p_item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.06);
  padding: 15px;
  .time {
    color: #888;
    font-size: 12px;
    margin-top: 4px;
  }
  .stock_code {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
  }
  .stock_name {
    font-size: 16px;
    color: #333;
  }

  .item_tag {
    font-size: 10px;
    color: #fff;
    background: #333;

    height: 17px;
    width: 17px;
    border-radius: 100%;
    text-align: center;
    line-height: 18px;
    margin-top: 3px;
  }
  .n-grid > div > div:first-child {
    font-size: 11px;
    color: #aaa;
  }
  .n-grid > div > div:nth-child(2) {
    font-size: 16px;

    margin-top: 1px;
  }
  .n-grid > div > div:nth-child(3) {
    font-size: 16px;
  }
}
.clearance .p_item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.06);
  padding: 10px 15px;
  .stock_name {
    font-size: 15px;
    font-weight: 300;
  }
  .stock_code {
    /* color: #aaa; */
    font-size: 12px;
  }
  .up {
    color: #ff5151;
  }
  .down {
    color: #57b979;
  }
  .normal {
    color: #888;
  }
}
:deep(.n-tabs .n-tabs-nav) {
  background-color: #fff;
  padding-left: 20px;
}

:deep(.n-tabs .n-tabs-bar) {
  background-color: #333;
  border-radius: 3px !important;
  height: 3px;
}
:deep(
    .n-tabs.n-tabs--top .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after,
    .n-tabs.n-tabs--bottom .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after
  ) {
  box-shadow: initial;
}
:deep(.n-tabs-tab) {
  padding-bottom: 5px;
  padding-top: 0px;
}
:deep(.n-tabs-tab__label) {
  font-size: 17px;
}
:deep(.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav-scroll-content) {
  border-bottom: none;
}
:deep(
    .n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,
    .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active
  ) {
  color: #171717;
}
:deep(.n-tabs .n-tabs-nav-scroll-wrapper) {
  /* box-shadow: 0 2px 5px -4px rgba(34, 24, 20, 0.25); */
}
:deep(.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-bar) {
  bottom: 0;
}
:deep(.n-tabs .n-tabs-tab) {
  color: #ccc;
}
:deep(.n-tab-pane) {
  padding-top: 0 !important;
}
:deep(.v-x-scroll) {
  width: calc(100% - 20px);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
:deep(.n-tabs-tab__label) {
  font-weight: 300;
}
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active) {
  font-weight: 700;
}
</style>
